<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
  <script src="../../scripts/plugins/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="../../scripts/plugins/select2.min.js"></script>
  <script src="../../scripts/lib/echarts-3.7.1/echarts.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li><a href="data-resource.html"><i class="icon-explore"></i><span>资源状态概览</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resource.html">资源概览</a></li>
        </ul>
      </li>

      <li class="active"> <a href="data-traffic.html"><i class="icon-db-search"></i><span>流量分析</span></a><em class="open"></em>
        <ul>
          <li class="active"><a href="data-traffic.html">数据库流量</a></li>
          <li> <a href="data-traffic-ftp.html">FTP流量</a></li>
        </ul>
      </li>

      <li> <a href="data-laws.html"><i class="icon-db-search"></i><span>流向分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-flow.html">流向分析</a></li>
          <li><a  href="data-client.html">客户端管理</a></li>
          <li><a href="data-threshold.html">风险阀值配置</a></li>
        </ul>
      </li>

      <li> <a href="data-laws.html"><i class="icon-db-search"></i><span>使用规律分析</span></a><em class="open"></em>
        <ul>
          <li><a href="data-overview.html">概况</a></li>
          <li> <a href="data-laws.html">资源使用规律</a></li>
          <li><a href="data-userlaw.html">用户行为规律</a></li>
        </ul>
      </li>

      <li> <a href="data-riskevent..html"><i class="icon-db-search"></i><span>风险事件</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-riskevent-charts.html">风险概况</a></li>
          <li> <a href="data-riskevent.html">事件查看</a></li>

        </ul>
      </li>

      <li> <a href="data-resourceconfig.html"><i class="icon-notifications-on"></i><span>数据资源管理</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resourceconfig.html">数据资源配置</a></li>
          <li><a href="data-ipconfig.html">参数配置</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title">
      <h2>流量概览</h2>
    </div>

    <div class="sys-content">
      <div class="col-left">
        <div class="panel" style="min-height:720px;">
          <div class="panel-head">
            <div class="panel-title">
              <h3>今日资源详情</h3>
            </div>
            <div class="alink"><a id="tablefull" href="javascript:void(0)"></a></div>
          </div>
          <div class="panel-body">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>资源名称</th>
                  <th>客户端IP数</th>
                  <th>资源类型</th>
                  <th>资源IP地址</th>
                  <th>今日读取量/历史平均值(万条)</th>
                  <th>今日写入量/历史平均值(万条)</th>
                  <th>今日总量/历史平均值(万条)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><a href="javascript:void(0)">HBASE</a></td>
                  <td><a href="javascript:void(0);">22</a></td>
                  <td>HBASE</td>
                  <td>172.191.223.15</td>
                  <td class="fc-danger">300/275</td>
                  <td class="fc-danger">32/27</td>
                  <td class="fc-danger">332/302</td>
                </tr>
                <tr>
                 <td><a href="javascript:void(0)">HBASE</a></td>
                 <td><a href="javascript:void(0);">22</a></td>
                 <td>HBASE</td>
                 <td>172.191.223.124</td>
                 <td class="fc-danger">110/75</td>
                 <td>23/27</td>
                 <td class="fc-danger">133/102</td>
               </tr>
               <tr>
                <td><a href="javascript:void(0)">HBASE</a></td>
                <td><a href="javascript:void(0);">12</a></td>
                <td>应用</td>
                <td>172.191.223.15</td>
                <td>22/27</td>
                <td>36/45</td>
                <td>68/72</td>
              </tr>
              <tr>
                <td><a href="javascript:void(0)">门户1</a></td>
                <td><a href="javascript:void(0);">23</a></td>
                <td>HBASE</td>
                <td>172.191.223.15</td>
                <td>23/27</td>
                <td>32/27</td>
                <td>332/302</td>
              </tr>
              <tr>
                <td><a href="javascript:void(0)">门户1</a></td>
                <td><a href="javascript:void(0);">2</a></td>
                <td>应用</td>
                <td>172.191.223.15</td>
                <td>36/45</td>
                <td>23/27</td>
                <td class="fc-danger">133/102</td>
              </tr>
              <tr>
                <td><a href="javascript:void(0)">门户1</a></td>
                <td><a href="javascript:void(0);">3</a></td>
                <td>ORACLE</td>
                <td>172.191.223.15</td>
                <td>300/275</td>
                <td>36/45</td>
                <td>68/72</td>
              </tr>
              <tr>
                <td><a href="javascript:void(0)">门户1</a></td>
                <td><a href="javascript:void(0);">5</a></td>
                <td>ORACLE</td>
                <td>172.191.223.15</td>
                <td class="fc-danger">110/75</td>
                <td>32/27</td>
                <td class="fc-danger">332/302</td>
              </tr>
              <tr>
               <td><a href="javascript:void(0)">HBASE</a></td>
               <td><a href="javascript:void(0);">11</a></td>
               <td>HBASE</td>
               <td>172.191.223.138</td>
               <td class="fc-danger">32/27</td>
               <td>23/27</td>
               <td class="fc-danger">133/102</td>
             </tr>
             <tr>
               <td><a href="javascript:void(0)">HBASE</a></td>
               <td><a href="javascript:void(0);">12</a></td>
               <td>HBASE</td>
               <td>172.191.223.15</td>
               <td>23/27</td>
               <td>36/45</td>
               <td>68/72</td>
             </tr>
             <tr>
              <td><a href="javascript:void(0)">HBASE</a></td>
              <td><a href="javascript:void(0);">12</a></td>
              <td>应用</td>
              <td>172.191.223.15</td>
              <td>36/45</td>
              <td>32/27</td>
              <td>133/102</td>
            </tr>
            <tr>
             <td><a href="javascript:void(0)">门户1</a></td>
             <td><a href="javascript:void(0);">23</a></td>
             <td>HBASE</td>
             <td>172.191.223.15</td>
             <td class="fc-danger">300/275</td>
             <td>23/27</td>
             <td>133/102</td>
           </tr>
           <tr>
             <td><a href="javascript:void(0)">门户1</a></td>
             <td><a href="javascript:void(0);">2</a></td>
             <td>应用</td>
             <td>172.191.223.15</td>
             <td class="fc-danger">110/75</td>
             <td>36/45</td>
             <td>68/72</td>
           </tr>
           <tr>
             <td><a href="javascript:void(0)">门户1</a></td>
             <td><a href="javascript:void(0);">3</a></td>
             <td>ORACLE</td>
             <td>172.191.223.15</td>
             <td>32/27</td>
             <td>32/27</td>
             <td class="fc-danger">332/302</td>
           </tr>
           <tr>
             <td><a href="javascript:void(0)">门户1</a></td>
             <td><a href="javascript:void(0);">5</a></td>
             <td>ORACLE</td>
             <td>172.191.223.15</td>
             <td>23/27</td>
             <td>23/27</td>
             <td>133/102</td>
           </tr>
           <tr>
             <td><a href="javascript:void(0)">门户1</a></td>
             <td><a href="javascript:void(0);">6</a></td>
             <td>ORACLE</td>
             <td>177.191.223.15</td>
             <td>36/45</td>
             <td>36/45</td>
             <td>68/72</td>
           </tr>
         </tbody>
       </table>
     </div><!--panel-body end-->
     <div class="panel-foot">
      <div class="btns"><!-- <button class="btn btn-danger">批量删除</button> --></div>
      <div class="page">
        <ul class="pagination">
          <li class="disabled"><a href="javascript:void(0);">&lt;</a></li>
          <li class="active"><a href="javascript:void(0);">1</a></li>
          <li><a href="javascript:void(0);">2</a></li>
          <li><a href="javascript:void(0);">3</a></li>
          <li><a href="javascript:void(0);">4</a></li>
          <li><a href="javascript:void(0);">5</a></li>
          <li><a href="javascript:void(0);">&gt;</a></li>
          <li class="go"><input type="text" title="输入页码跳转"></li>
        </ul>
      </div>
    </div><!--panel-foot end-->
  </div>
</div>

<div class="col-right" style="padding-left:20px;">
  <div class="panel" style="min-height:720px;">
    <div class="panel-head">
      <div class="panel-title">
        <h3>流量概览</h3>
      </div>
    </div>
    <div class="panel-body">
      <div id="chart1" class="chart col-4">loading...</div>
      <div id="chart2" class="chart col-4">loading...</div>
      <div id="chart3" class="chart col-4">loading...</div>
      <div class="row">
        <div class="btnbar dropdown fr" style="margin-right:60px;">
        <button class="btn btn-minor btn-sm">统计周期</button>
          <ul class="dropdown-menu">
            <li><i class="icon-security"  id="add"></i><span>小时</span></li>
            <li><i class="icon-db-del"></i><span>天</span></li>
            <li><i class="icon-notifications-on"></i><span>月</span></li>
          </ul>
        </div>
        <div class="btnbar group">
          <!-- <button>访问数</button> -->
          <button class="active">访问流量</button>
          <button>访问次数</button>
        </div>
        <div id="chart4" class="chart">loading...</div>
      </div>


    </div><!--panel-body end-->
  </div>
</div>

</div>
</div>



<div class="dialog" id="info">
  <div class="dialog-win">
    <div class="dialog-head"><span>客户端详情</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
    <div class="dialog-body">
     <table class="table table-striped">
        <thead>
          <tr>
            <th width="5%" class="no-sort">序号</th>
            <th>客户端IP</th>
            <th>数据读取量</th>
            <th>数据写入量</th>
            <th>总量</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>172.191.223.15</td>
            <td>300万条</td>
            <td>1325万条</td>
            <td>1325万条</td>
          </tr>
          <tr>
            <td>2</td>
            <td>172.191.223.124</td>
            <td>300万条</td>
            <td>1335.2万条</td>
            <td>1335.2万条</td>
          </tr>
          <tr>
            <td>3</td>
            <td>172.191.223.138</td>
            <td>300万条</td>
            <td>1325万条</td>
            <td>1325万条</td>
          </tr>
          <tr>
            <td>4</td>
            <td>172.191.223.15</td>
            <td>300万条</td>
            <td>1335.2万条</td>
            <td>1335.2万条</td>
          </tr>
          <tr>
            <td>5</td>
            <td>172.191.223.15</td>
            <td>300万条</td>
            <td>1325万条</td>
            <td>1325万条</td>
          </tr>
          <tr>
            <td>6</td>
            <td>172.191.223.15</td>
            <td>300万条</td>
            <td>1335.2万条</td>
            <td>1335.2万条</td>
          </tr>
          <tr>
            <td>7</td>
            <td>172.191.223.15</td>
            <td>300万条</td>
            <td>1325万条</td>
            <td>1325万条</td>
          </tr>
          <tr>
            <td>8</td>
            <td>172.191.223.15</td>
            <td>300万条</td>
            <td>1335.2万条</td>
            <td>1335.2万条</td>
          </tr>
          <tr>
            <td>9</td>
            <td>172.191.223.15</td>
            <td>300万条</td>
            <td>1325万条</td>
            <td>1325万条</td>
          </tr>
          <tr>
            <td>10</td>
            <td>177.191.223.15</td>
            <td>300万条</td>
            <td>1335.2万条</td>
            <td>1335.2万条</td>
          </tr>
        </tbody>
      </table>
    </div><!--dialog-body end-->
  </div><!--dialog-win end-->
</div><!--dialog end-->



</body>
</html>
<script>

  (function($){
    $(window).load(function(){
      $(".dialog-body").mCustomScrollbar({
        autoHideScrollbar:true,
        advanced:{
          autoExpandHorizontalScroll:true
        }
      });
    });
  })(jQuery);

  $(document).ready(function(){
// $(".col-left .table thead tr th:gt(2),.col-left .table tbody > tr > td:gt(2)").hide();
$(".col-left .table").find("tr").each(function() {
  $(this).children("th:gt(2),td:gt(2)").hide();
})

$("#tablefull").on('click',  function() {
 if($(this).hasClass("open")) {
  $(this).prop("class","");
  $(".col-left .table").find("tr").each(function() {
    $(this).children("th:gt(2),td:gt(2)").hide();
  })
  $(".col-left").stop(true).animate({"width": '20%'},400);
  $(".col-right").stop(true).animate({"width": '80%',"display":"none"},400,function(){ $(".col-right").show();});
}
else{
  $(this).prop("class","open");
  $(".col-left .table").find("tr").each(function() {
    $(this).children("th:gt(2),td:gt(2)").show();
  })
  $(".col-left").stop(true).animate({"width": '100%'},400);
  $(".col-right").hide();stop(true).animate({"width": '0'},400);

}
});


$(".scrollbar").mCustomScrollbar({
  autoHideScrollbar:true,
  advanced:{
    autoExpandHorizontalScroll:true
  }
});

$(".dropdown-menu li:eq(0)").on("click",function(){
  console.log($(this).parents(".open"));
  $(this).parents(".open").removeClass('open');
  $(".dialog").show();
})

$(".dropdown").on("click", "button", function() {
  $(this).parent().hasClass('open') ? $(this).parent().removeClass('open') : $(this).parent().addClass('open');
})


$(".dialog .close,#cancel").on("click",function(){
  $(".dialog").hide();
})

$(".table tr").on("click", "td:eq(0) a", function() {
  $(this).parents("tr").siblings().removeClass('active').end().addClass('active') ;
});

$(".table tr").on("click", "td:eq(1) a", function() {
  // $(this).parents("tr").siblings().removeClass('active').end().addClass('active') ;
  $("#info").show()
});



})


var setting = {
  check: {
    enable: true
  },
  data: {
    simpleData: {
      enable: true
    }
  }
};

var zNodes =[
{ id:1, pId:0, name:"DBPPOTAL", open:true},
{ id:11, pId:1, name:"T-USERINFO"},
{ id:12, pId:1, name:"T-LOG"},
{ id:13, pId:1, name:"T-LOGIN"},
{ id:14, pId:1, name:"T-IP-INFO"},

{ id:2, pId:0, name:"DB-WEBSITE"},
{ id:21, pId:2, name:"T-DB-NEW"},
{ id:22, pId:2, name:"T-DB-2016"},
{ id:23, pId:2, name:"T-DB-INFO2016-TEMP"},

{ id:3, pId:0, name:"DB-WASKL"},
{ id:31, pId:3, name:"T-SQMSL"},
{ id:32, pId:3, name:"T-SMQXH-JSK"},
{ id:33, pId:3, name:"T-BMSL-ZSJD"},

{ id:4, pId:0, name:"DB-ORACL-DJS"},
{ id:41, pId:4, name:"T-SKA"},
{ id:42, pId:4, name:"T-ZJSL2"},
{ id:43, pId:4, name:"T-Z,MWNZ"},
{ id:44, pId:4, name:"T-MBMSA"},
];


option = {
  title: {
    text: '读取流量'
  },
  xAxis: {
    data: ['今日','平均','峰值']
  },
  yAxis: {},
  series: [{
    name: '次数',
    type: 'bar',
    barWidth: 35,
    data: [292, 137, 850,]
  }]
};
var myChart1 = echarts.init(document.getElementById('chart1'));
myChart1.setOption(option, true);

option2 = {
  title: {
    text: '写入流量'
  },
  xAxis: {
    data: ['今日','平均','峰值']
  },
  yAxis: {},
  series: [{
    name: '次数',
    type: 'bar',
    barWidth: 35,
    data: [292, 137, 850,]
  }]
};
var myChart2 = echarts.init(document.getElementById('chart2'));
myChart2.setOption(option2, true);

option3 = {
  title: {
    text: '访问IP量'
  },
  xAxis: {
    data: ['今日','平均','峰值']
  },
  yAxis: {},
  series: [{
    name: '次数',
    type: 'bar',
    barWidth: 35,
    data: [292, 137, 850,]
  }]
};
var myChart3 = echarts.init(document.getElementById('chart3'));
myChart3.setOption(option3, true);


option4 = {
  title: {
    text: '流量趋势'
  },
  tooltip: {
    trigger: 'axis'
  },

  legend: {
    data: ['读取', '写入']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2017/1/4','2017/1/5','2017/1/6','2017/1/9','2017/1/10','2017/1/11','2017/1/12','2017/1/13','2017/1/16','2017/1/17','2017/1/18','2017/1/19','2017/1/20','2017/1/23','2017/1/24','2017/1/25','2017/1/26','2017/2/3','2017/2/6','2017/2/7','2017/2/8','2017/2/9','2017/2/10','2017/2/13','2017/2/14','2017/2/15','2017/2/16','2017/2/17','2017/2/20','2017/2/21','2017/2/22','2017/2/23','2017/2/24','2017/2/27','2017/2/28','2017/3/1','2017/3/2','2017/3/3','2017/3/6','2017/3/7','2017/3/8','2017/3/9','2017/3/10','2017/3/13','2017/3/14','2017/3/15','2017/3/16','2017/3/17','2017/3/20','2017/3/21','2017/3/22','2017/3/23','2017/3/24','2017/3/27','2017/3/28','2017/3/29','2017/3/30',]
  },
  yAxis: [{
    type: 'value',
    axisLabel: {
      formatter: '{value} '
    },
    min: 0.895,
    max: 1.05
  }],
  dataZoom: [{
    type: 'inside',
    start: 50,
    end: 100
  }, {
    show: true,
    type: 'slider',
    y: '90%',
    start: 50,
    end: 100
  }],
  series: [{
    name: '读取',
    type: 'line',
    lineStyle: {
      normal: {
        width: 2,
      }
    },
    data: [1,1.000189772,1.000189772,1.000189772,0.997939063,0.992537318,0.989490199,0.974977926,0.947689785,0.949880506,0.939629408,0.938309442,0.954201666,0.961593974,0.953704128,0.960966424,0.966994688,0.961488245,0.974180387,0.969524378,0.977555209,0.985048641,0.979408321,0.98731151,0.987566987,0.982467755,0.984364755,0.974682889,0.978588078,0.990235702,0.992904632,0.995295972,1.001662299,0.997080908,0.99913516,1.002877968,0.998727702,1.002154483,1.013609497,1.02264329,1.016936656,1.011476882,1.011922471,1.016590653,1.014508068,1.014950891,1.025584354,1.021197338,1.021586718,1.020461641,1.012207566,1.010837258,1.013660213,1.011252066,1.008903598,0.998818425,0.974263608,]
  }, {
    name: '写入',
    type: 'line',
    lineStyle: {
      normal: {
        width: 2,
      }
    },
    data: [1,1.002095739,0.998584901,1.003941383,1.000911742,0.993022645,0.987495212,0.985427965,0.982474302,0.984164823,0.985507109,0.981799993,0.988714033,0.993028976,0.994858791,0.997074829,1.000120299,0.994105338,0.999426996,0.998195512,1.002592765,1.007721311,1.012001431,1.01837729,1.018722359,1.017158469,1.022423143,1.013704615,1.025696548,1.029929182,1.032426974,1.029311857,1.029960839,1.022119229,1.02625689,1.027903089,1.02255294,1.018842658,1.023768595,1.026472162,1.025918152,1.018348798,1.017085656,1.024765812,1.025497105,1.026266387,1.034870947,1.02490194,1.029131408,1.032550439,1.027361743,1.028415944,1.035032402,1.034244125,1.029808883,1.026123927,1.016287882,]
  }]
};
var myChart4 = echarts.init(document.getElementById('chart4'));
myChart4.setOption(option4, true);
</script>